
<template>
  <div class="new">
      <div class="new_list">
        <pull-to :top-load-method="refresh" :bottom-load-method="refresha">
        <div class="list_box" >

          <div v-if="arr===false||arr==''" class="if">
            <li class="list_wu">
                <div class="wu">
                  <img src="./img/back.png" alt="" class="bga"><br>
                </div><br>
                <div class="wu_wz">
                  <div class="wz">
                    <span>您周边没有使用开后门的销售伙伴！</span>
                    <span>要知道，越多的异业销售朋友加入，</span>
                    <span>您获得潜在客户资源越多！</span>
                    <span>快邀请您周围的销售朋友加入进来吧！</span>
                  </div>
                </div>
            </li>
          </div>

          <div v-else-if="lat==''||lng==''||lat==undefined||lng==undefined||lat==0||lng==0" class="if">
            <li class="list_wu">
                <div class="wu">
                  <img src="./img/back.png" alt="" class="bga"><br>
                </div><br>
                <div class="wu_wz">
                  <div class="wz">
                    <span>开启"开后门"定位权限</span>
                    <span>查看更多周边服务</span>
                  </div>
                </div>
            </li>
          </div>

          <div v-else class="if">

                <div class="list" v-for="(item,index) in arr" :key="index" >
                      <a class="list_href" :href="'yqlh://BDetail_user_id='+item.user_id">
                          <img :src="item.avatar_head" class="new_photo" />
                          <div class="new_xq">
                            <span class="new_name">{{item.nickname}}</span>
                            <div class="new_trade">
                                <span class="hang">{{item.industry_name}}</span>
                            </div>
                          </div>
                          <span class="new_address">
                              <!-- 北京市朝阳区 -->
                          </span>
                          <span class="new_company">{{item.store_name}}</span>
                          <!-- <a :href="'yqlh://user_id='+item.user_id+'&nickname='+item.nickname+'&headimg='+item.avatar_head+'&relation_type=3'">
                              <button class="gou">
                                    沟通
                              </button>
                          </a> -->
                          <span class="new_people">拥有客源量：<span class="new_num">{{item.myc}}人</span></span>
                          <span class="new_juli">距离：{{item.km}}</span>
                      </a>
                      <!-- <span class="new_value" v-if="item.unit_price==0">客源售价：<span class="new_price">{{str.x}}</span></span>
                      <span class="new_value" v-else>客源售价：<span class="new_price">￥{{item.unit_price}}</span></span> -->
                      <div class="new_linea"></div>
                      <!-- <a  class="new_buybtn" :href="'yqlh://user_b_id='+item.user_id+'&relation_type=1'+'&nickname='+item.nickname">购买客源</a> -->
                      <a  class="new_buybtn" :href="'yqlh://user_b_id='+item.user_id+'&relation_type=1'+'&nickname='+item.nickname">和他沟通</a>
                      <div class="new_lineb"></div>
                      <a class="new_changebtn" v-if="item.click==2" :href="'yqlh://user_b_id='+item.user_id+'&relation_type=2'+'&nickname='+item.nickname+'&click=1'" >客源互推</a>
                      <div class="new_changebtn" v-else-if="item.click==0">请求中</div>
                      <div class="new_changebtn" v-else-if="item.click==1">互推成功</div>

                </div>

          </div>
        </div>
        </pull-to>
      </div>
  </div>
</template>
<script>


import axios from 'axios'
import PullTo from 'vue-pull-to'
import {MP} from '../../common/js/loadMap';


export default {
  name: 'example',
  components: {
    PullTo
  },
  data(){
    return {
      lat:"",
      lng:"",
      a:"hybrid",
      page:1,
      arr:{ },
      str:{
        x:"暂无"
      },
      errNetwork:false,
      token:this.GLOBAL.serverSrc
    }
  },
  created() {

    var that = this;
    //alert(that.$route.query.gps_lng)
    if(that.$route.query.gps_lng!=""&&that.$route.query.gps_lat!=""){
      that.lng=that.$route.query.gps_lng;
      that.lat=that.$route.query.gps_lat;
      that.getData()
    }else if(that.$route.query.gps_lng==""||that.$route.query.gps_lat==""||that.$route.query.gps_lat==undefined||that.$route.query.gps_lng==undefined||that.$route.query.gps_lng==0||that.$route.query.gps_lat==0){
        MP('4a465ce82fb3b8abdc662d8c2ad9e470').then(function (AMap) {
        that.errNetwork = false;

        AMap.service(["AMap.Geolocation"],function(){
          var geolocation = new AMap.Geolocation();
          geolocation.getCurrentPosition(function(status,result) {
            if(status=="complete"){

              that.lng = result.position.lng;
              that.lat = result.position.lat;
              that.getData();
            }else{
              // attendanceVue.currentAddress.ADDRESS=result.message;
              console.log('asdasd');
            }
           });
        });

       }).catch(err=>{
        that.errNetwork = true;
       })
    }

  },
  methods: {
    //下拉
    refresh(loaded){
      setTimeout(() => {
        this.getData();
        loaded('done');
      }, 200);
    },
    refresha(loaded){
      setTimeout(() => {
        this.page++;
        var url=this.token+'/user/aib?page='+this.page;
        var obj;
        if(this.lat>0&&this.lng>0){
          obj={
              user_id:this.$route.query.userid,
              gps_lng:this.lng,
              gps_lat:this.lat,
              driver_uuid:this.a
            }
        }else{
          obj={
              user_id:this.$route.query.userid
            }
        }
        var thet=this;
        //alert(this.lat)
        this.$axios.post(url,obj).then(response=>{
          response.data.data.forEach((item, index) => {
              thet.arr.push(item)
          })
        })
        .catch(function(error) {
            console.log(error);
        });
        loaded('done');
      }, 200);
    },
    getData(){
      var url=this.token+'/user/aib';
      var obj={
        user_id:this.$route.query.userid,
        gps_lng:this.lng,
        gps_lat:this.lat,
        driver_uuid:this.a
      }
      var thet=this;
      //alert(obj.gps_lng)
      this.$axios.post(url,obj).then(response=>{
          thet.arr=response.data.data
      })
      .catch(function(error) {
          console.log(error);
      });
    }
  }
}
</script>
<style lang="scss" scoped>
a{
    text-decoration:none;
}
img{ pointer-events: none;vertical-align: sub;}
.new{
  width:100%;
  height:100%;
  position:fixed;
  background:rgb(247,247,247);
  background-image:url("./img/a.png");
  background-repeat: no-repeat;
  background-size:100% 1.45rem;
  z-index: 3;
}
.list_box,.if{
  width:100%;
  display:flex;
  justify-content: center;
  flex-wrap: wrap;
}
.new_list{
  width:100%;
  height:100%;
  position:fixed;
  top:0.73rem;
  overflow-x: hidden;
  overflow-y:auto;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  .list:nth-last-of-type(1){
    margin-bottom: 0.8rem;
  }
  .list{
    width:3.54rem;
    height:1.07rem;
    background:#FFFFFF;
    position:relative;
    border-radius:0.06rem!important;
    margin-bottom:0.1rem;
    .list_href{
      display: inline-block;
      text-decoration: none;
      width:100%;
      height:0.75rem;
      position: absolute;
      left:0;
      top:0;
    }
    .new_photo{
      width:0.59rem;
      height:0.59rem;
      position: absolute;
      top:0.1rem;
      left:0.12rem;
      border-radius:0.05rem;
    }
    .new_xq{
      width:2.3rem;
      display:flex;
      position: absolute;
      top:0.12rem;
      left:0.82rem;
      .new_name{
        max-width:0.9rem;
        overflow: hidden;
        text-overflow:ellipsis;
        white-space: nowrap;
        height:0.2rem;
        line-height: 0.2rem;
        color:#1B1B1B;
        font-size:0.15rem;
        font-weight:bold;
      }
      .new_occupation{
        color:#636363;
        font-size:0.12rem;
        margin-left:0.09rem;
      }

      .new_trade{
        padding:0 0.04rem 0 0.04rem;
        height:0.16rem;
        //border:0.001rem solid #43DCC2;
        background:rgb(227,250,246);
        color:#43DCC2;
        font-size:0.1rem;
        margin-left:0.11rem;
        line-height:0.18rem;
        margin-top:-0.02rem;
        .hang{
          padding-top: 0.03rem;
        }
      }
    }
    .new_address{
      color:#636363;
      font-size:0.12rem;
      margin-left:0.1rem;
      position: absolute;
      top:0.12rem;
      left:2.6rem;
    }
    .new_company{
      width:2.6rem;
      overflow: hidden;
      text-overflow:ellipsis;
      white-space: nowrap;
      height:0.2rem;
      line-height: 0.2rem;
      font-size:0.12rem;
      position: absolute;
      color:black;
      top:0.32rem;
      left:0.82rem;
    }
    .gou{
      width:0.59rem;
      height:0.2rem;
      //border:0.01rem solid #46DCC3;
      color:#46DCC3;
      font-size:0.12rem;
      border-radius:0.19rem;
      position:absolute;
      top:0.11rem;
      left:2.8rem;
      border:none;
      background:rgb(226,250,247);
    }
    .sq{
      color:red;
      font-size:0.14rem;
      position: absolute;
      top:0.1rem;
      left:2.9rem;
    }
    .new_people{
      color:#636363;
      font-size:0.12rem;
      position: absolute;
      top:0.56rem;
      left:0.82rem;
      .new_num{
        color:#43DCC2;
      }
    }
    .new_juli{
      color:#636363;
      font-size:0.12rem;
      position: absolute;
      top:0.56rem;
      left:2rem;
    }
    .new_value{
      color:#636363;
      font-size:0.12rem;
      position: absolute;
      top:0.56rem;
      left:2.1rem;
      .new_price{
        color:#43DCC2;
      }
    }
    .new_linea{
      width:3.32rem;
      height:0.005rem;
      background:#EEEEEE;
      position: absolute;
      top:0.76rem;
      left:0.1rem;
    }
    .new_lineb{
      width:0.01rem;
      height:0.21rem;
      background:#EEEEEE;
      position: absolute;
      top:0.83rem;
      left:1.76rem;
    }
    .new_buybtn{
      width:49.5%;
      height:0.28rem;
      text-align: center;
      line-height: 0.29rem;
      position: absolute;
      top:0.8rem;
      left:0;
      color:#46DCC3;
      font-size:0.14rem;
      background:#FFFFFF;
      border:none;
      outline: none;
      text-decoration: none;
    }
    .new_changebtn{
      width:49.5%;
      height:0.28rem;
      text-align: center;
      line-height: 0.29rem;
      position: absolute;
      top:0.8rem;
      left:1.77rem;
      color:#939393;
      font-size:0.14rem;
      background:#FFFFFF;
      border:none;
      outline: none;
      text-decoration: none;
    }
  }
}
.list_wu{
  width:3.54rem;
  height:2.2rem;
  background: #FFFFFF;
  border-radius:0.05rem;
  position:relative;
  margin-bottom: 0.05rem;
  display:flex;
  flex-wrap:wrap;
  align-content:center;
  .wu{
    width:100%;
    display:flex;
    justify-content: center;
    align-items: center;
    margin-bottom:0.16rem;
    .bga{
      width:1.6rem;
      height:0.8rem;
    }
  }
  .wu_wz{
    width:100%;
    display:flex;
    flex-wrap:wrap;
    justify-content: center;
    align-items:space-around;
    color:#939393;
    font-size:0.13rem;
    .wz{

      span{
        width:100%;
        display:flex;
        margin-bottom:0.05rem;
        //justify-content:center;
      }
    }
  }
}
</style>
